<template>
	<div class="productCatalog">
		<div class="container">
			<el-container>
			<el-header>
				<el-row><el-form ref="catalogsRef" :rules="catalogsRules" :model="catalogs" :label-width="formLabelWidth">
					<el-col :span="8">
					<el-form-item label="选择商品分类" prop="strFstCatalogInput">
						<el-input v-model="catalogs.fstCatalogInput" v-if="false" />
						<el-input v-model="catalogs.strFstCatalogInput" placeholder="第一分类" clearable readonly :disabled="confrimFlg" style="width:200px" @click="func_fstClk(1)"/>
					</el-form-item>
					</el-col><el-col :span="8">
					<el-form-item label="选择商品分类" prop="strSndCatalogInput">
						<el-input v-model="catalogs.sndCatalogInput" v-if="false" />
						<el-input v-model="catalogs.strSndCatalogInput" placeholder="第二分类" clearable readonly :disabled="confrimFlg" style="width:200px" @click="func_fstClk(2)"/>
					</el-form-item>
					</el-col><el-col :span="5">
					<el-form-item label="选择商品分类" prop="strThdCatalogInput">
						<el-input v-model="catalogs.thdCatalogInput" v-if="false" />
						<el-input v-model="catalogs.strThdCatalogInput" placeholder="第三分类" clearable readonly :disabled="confrimFlg" style="width:200px" @click="func_fstClk(3)"/>
					</el-form-item>
					</el-col><el-col >
					<el-form-item>
						<el-button type="primary" @click="func_next" plain v-if="showA" >确定</el-button>
						<el-button @click="confrimFlg = false;showA= true; showB=false;" plain v-if="showB">取消</el-button>
					</el-form-item>
					</el-col>
				</el-form></el-row>
			</el-header>
			<el-container style="margin-top:20px" v-if="nextVisible">
				<el-aside width="200px" style="height:790;margin-top:150px">
					<div style="height: 300px">
						<el-steps direction="vertical" :active="stepActive">
						<el-step title="基础信息" />
						<el-step title="商品宣传页" />
						</el-steps>
					</div>
				</el-aside>
				<el-main style="width:100%;height:790px">
					<div class="handle-box">
						<VProductFrom v-bind:selectValue="catalogs" @fromData="func_loadVProductFormData" />
					</div>
				</el-main>
			</el-container>
			</el-container>
		</div>
		<el-dialog title="商品分类（字典查询）" v-model="vDictDialogVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VClassifyDict v-bind:selectValue="dialog_query" @dictData="func_loadvClassDictData" />
            </div>
		</el-dialog>
	</div>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";
import VClassifyDict from "../components/classifyDict.vue";
import VProductFrom from  "./components/productForm.vue";
export default {
    name: "productDetail",
    components: {VClassifyDict, VProductFrom, },
    setup() {
        const router = useRouter();
		const route = useRoute();
        const formLabelWidth = ref("150px");
		const vDictDialogVisible = ref(false);
		const confrimFlg = ref(false);
		const stepActive = ref(0);
		const showA = ref(true);
		const showB = ref(false);
		const nextVisible = ref(false);
		const query = reactive({
			keyword: "",
			classifyGrade: 0,
			parentId: 0,
		});
		const dialog_query = reactive({
			classifyGrade: 0,
			parentId: 0,
		});
        const func_onLoad = () => {
        };
        const catalogsRules = {
            strFstCatalogInput: [
                { required: true, message: "请选择商品一类", trigger: "blur" },
            ],
            strSndCatalogInput : [
                { required: true, message: "请选择商品二类", trigger: "blur" },
            ],
            strThdCatalogInput : [
                { required: true, message: "请选择商品三类", trigger: "blur" },
            ],
        };
		const catalogsRef = ref(null);
		const catalogs = ref({
			load: false,
			fstCatalogInput: 0,
			strFstCatalogInput: "",
			sndCatalogInput: 0,
			strSndCatalogInput: "",
			thdCatalogInput: 0,
			strThdCatalogInput: "",
		});
        func_onLoad();
		const func_fstClk = (v) => {
			switch (v) {
				case 1:
					dialog_query['parentId']=0;
					dialog_query['classifyGrade']=0;
					vDictDialogVisible.value= true;
					break;
				case 2:
					dialog_query['parentId'] = catalogs.value['fstCatalogInput'];
					dialog_query['classifyGrade'] = 1;
					vDictDialogVisible.value= true;
					break;
				case 3:
					dialog_query['parentId'] = catalogs.value['sndCatalogInput'];
					dialog_query['classifyGrade'] = 2;
					vDictDialogVisible.value= true;
					// ElMessage.warning("678677867866786");
					break;
				default:
					break;
			}
		};
		const func_loadvClassDictData = (v) => {
			switch (v['classifyGrade']) {
				case 0:
					catalogs.value['fstCatalogInput'] = v['dicCode'];
					catalogs.value['strFstCatalogInput'] = v['dicName'];
					catalogs.value['sndCatalogInput'] = "";
					catalogs.value['strSndCatalogInput'] = "";
					catalogs.value['thdCatalogInput'] = "";
					catalogs.value['strThdCatalogInput'] = "";
					break;
				case 1:
					catalogs.value['sndCatalogInput'] = v['dicCode'];
					catalogs.value['strSndCatalogInput'] = v['dicName'];
					catalogs.value['thdCatalogInput'] = "";
					catalogs.value['strThdCatalogInput'] = "";
					break;
				case 2:
					catalogs.value['thdCatalogInput'] = v['dicCode'];
					catalogs.value['strThdCatalogInput'] = v['dicName'];
					break;
				default:
					break;
			}
            vDictDialogVisible.value = false;
        };
		const func_loadVProductFormData = (v) => {
			stepActive.value = v['state'];
		};
		const func_next = () => {
            // 表单校验
            catalogsRef.value.validate((valid) => {
				if (valid) {
					confrimFlg.value = true;
					showA.value = false;
					showB.value = true;
					nextVisible.value = true;
					catalogs.value['load'] = true;
				}
			});

		}
// =========================================================================================
        return {
			// 系统变量
            formLabelWidth, catalogsRules, catalogsRef, catalogs, dialog_query, query, vDictDialogVisible,
			stepActive, confrimFlg, showA, showB, nextVisible,
			// 主表格调用方法
			func_onLoad, func_fstClk, func_next,
			// 插件业务调用方法
			func_loadvClassDictData, func_loadVProductFormData,
        };
    },
};
</script>
<style scoped>

</style>